<template>
  <view class="container">
    <!-- #ifdef APP-PLUS || MP -->
    <view class="tui-header">
      Hi，欢迎使用DT阅读！当前版本：
      <text class="tui-version">V{{ version }}</text>
    </view>
    <!-- #endif -->
    <view class="tui-log">
      <tui-time-axis>
        <tui-timeaxis-item v-for="(item, index) in logList" :key="index">
          <template v-slot:node>
            <view class="tui-node">
              <tui-icon
                name="explore-fill"
                :color="version == item.version ? '#6cc' : '#ddd'"
                :size="18"
              ></tui-icon>
            </view>
          </template>
          <template v-slot:content>
            <view class="tui-content-log" :class="[version == item.version ? '' : 'tui-log-gray']">
              <view class="tui-version-date">
                {{
                logList.length - 1 == index
                ? item.version
                : "V" + item.version
                }}（{{ item.date }}）
              </view>
              <view
                v-for="(model, index2) in item.log"
                :key="index2"
                class="tui-log-text"
              >{{ model }}</view>
            </view>
          </template>
        </tui-timeaxis-item>
      </tui-time-axis>
    </view>
  </view>
</template>

<script>
import tuiIcon from "@/components/icon/icon";
import tuiTimeAxis from "@/components/time-axis/time-axis";
import tuiTimeaxisItem from "@/components/timeaxis-item/timeaxis-item";
import { mapState } from "vuex";
export default {
  computed: mapState(["version"]),
  components: {
    tuiIcon,
    tuiTimeAxis,
    tuiTimeaxisItem
  },
  data() {
    return {
      logList: [
        {
          version: "0.0.1",
          date: "2019-09-06",
          log: [
            "第一次内测：",
            "1.可搜索书籍",
            "2.可阅读书籍",
            "3.可保存阅读配置信息"
          ]
        },
        {
          version: "0.0.2",
          date: "2019-09-07",
          log: [
            "内测第二版：",
            "* 修复夜间模式按钮图片不显示的问题",
            "* 修复书籍目录界面点击无反应",
            "* 我的界面背景图的微调",
            "+ 阅读界面顶部导航颜色跟随配置"
          ]
        },
        {
          version: "0.0.3",
          date: "2019-09-07",
          log: [
            "内测第三版：",
            "* 页面栈中多个阅读界面时重复保存阅读进度",
            "+ 阅读界面手指滑动翻页"
          ]
        },
        {
          version: "0.0.4",
          date: "2019-09-07",
          log: [
            "内测第四版：",
            "* 滑动手指翻页优化",
            "* 阅读界面显示优化",
            "* 上一页跳转上一章的最后一页",
            "* 最后一页内容不足一页时翻页优化",
            "- 去掉目录页面的下拉刷新",
            "+ 首页刷新是否有更新内容",
            "+ 首页书架书籍阅读顺序记录"
          ]
        },
        {
          version: "0.0.5",
          date: "2019-09-09",
          log: [
            "内测第五版：",
            "+ 添加设置页面",
            "+ 阅读界面常亮",
            "* 其他若干优化"
          ]
        },
        {
          version: "0.1.0",
          date: "2019-09-09",
          log: [
            "内测第六版：",
            "+ 搜索多个源",
            "+ 阅读界面换源",
            "+ 最后一章的下一页打开换源页面窗口",
            "* 修复阅读界面滑动不会重置休眠时间"
          ]
        },
        {
          version: "0.1.1",
          date: "2019-09-19",
          log: [
            "内测第七版：",
            "+ 删除备用源",
            "* 搜索速度优化",
            "* 搜索结果显示修改",
            "+ 添加源"
          ]
        },
        {
          version: "0.1.2",
          date: "2019-09-26",
          log: [
            "内测第八版：",
            "* 首页进入书籍目录点击阅读不能保存进度的bug",
            "* 修复备用源较多时，请求超时的问题",
            "+ 添加多个源",
            "+ 翻页动画的配置"
          ]
        },
        {
          version: "0.1.4",
          date: "2019-09-27",
          log: [
            "v0.1.4：",
            "* 修复阅读界面翻页动画配置不是上下时，也可以上下滑动的bug"
          ]
        },
        {
          version: "1.0.0",
          date: "2019-09-29",
          log: [
            "上线吧：",
            "* 翻页动画配置平移时，页数的问题修复",
            "* 首页书架过多导致请求超时的问题以及刷新更新的问题"
          ]
        },
        {
          version: "1.1.0",
          date: "2019-10-18",
          log: [
            "更新：",
            "* 阅读时，快速点击换源导致重复多次加载其他源数据的bug",
            "* 修复首页下拉刷新完成，不会自动取消下拉样式的bug",
            "+ 首页刷新书籍是否有更新时，显示loading",
            "PS 上不了线，小说类必须企业认证。暂时就用着体验版吧"
          ]
        },
        {
          version: "1.1.1",
          date: "2019-10-26",
          log: [
            "更新：",
            "* 修复所解析网站地址不能访问的情况下，不能换源阅读的bug"
          ]
        },
        {
          version: "2.0.0",
          date: "2020-02-22",
          log: [
            "更新：",
            "+ 添加管理员入口",
            "+ 添加管理员-用户管理",
            "+ 添加管理员-反馈源查看",
            "+ 添加管理员-解析源规则管理"
          ]
        },
        {
          version: ".planing",
          date: "coming",
          log: [
            "未来计划中：",
            "? 自定义阅读背景",
            "? 全局夜间模式",
            "? 设置时间段自动夜间模式"
          ]
        }
      ].reverse()
    };
  },
  methods: {}
};
</script>

<style>
.container {
  overflow: hidden;
}

.tui-header {
  width: 100%;
  padding: 0 30upx;
  box-sizing: border-box;
  font-size: 24upx;
  color: #999;
  height: 54upx;
  line-height: 54upx;
  background: #fff8d5;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  z-index: 999999;
}

.tui-version {
  color: #f54f46;
  font-weight: bold;
}

.tui-log {
  padding: 84upx 80upx 30upx 40upx;
  box-sizing: border-box;
}

.tui-node {
  padding: 3px 0;
}

.tui-content-log {
  border-radius: 10upx;
  position: relative;
  padding: 20upx 26upx;
  font-size: 28upx;
  color: #fff;
  background: #6cc;
  border: 1upx solid #6cc;
  display: inline-block;
}

/* .tui-log-text {
  word-break: break-all;
  word-wrap: break-word;
  text-align: justify;
} */

.tui-content-log::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: 14upx;
  border: 16upx solid;
  right: 100%;
  border-color: transparent #6cc transparent transparent;
}

.tui-log-gray {
  background: #ededed !important;
  border: 1upx solid #ededed !important;
  color: #999 !important;
}

.tui-log-gray::before {
  border-color: transparent #ededed transparent transparent !important;
}

.tui-version-date {
  font-size: 32upx;
  font-weight: bold;
  padding-bottom: 20upx;
}
</style>
